<!--
 * @FilePath: Api_report.vue
 * @@author: wjj
 * @Date: 2025-08-06 10:01:15
 * @@Description: new js file
-->
<template>
  <el-card
    style="
      height: 90px;
      border-radius: 35px;
      background-color: rgb(204, 214, 225, 0);
    "
    class="card_class"
    :class="{ folded: LayOutSettingStore.fold }"
  >
    <div>
      <h1 style="margin: 0; font-size: 22px; font-weight: 600">API测试报告</h1>
    </div>
    <div style="display: flex; justify-content: space-between; height: 100%">
      <div style="display: flex; align-items: center">
        <h3 style="margin-right: 10px">报告列表</h3>
        <div
          style="
            padding: 2px 8px;
            border-radius: 4px;
            border: 1px solid var(--el-border-color);
            height: 20px;
          "
        >
          <span style="color: #409eff; font-size: 12px; font-weight: 500">
            共{{ total }}份报告
          </span>
        </div>
      </div>
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="测试人" v-model="keyword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="default"
            :disabled="keyword ? false : true"
            @click="search"
          >
            搜索
          </el-button>
          <el-button type="primary" size="default" @click="reset">
            刷新
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
  <el-card
    style="
      margin: 10px 0px;
      border-radius: 35px;
      background-color: rgb(204, 214, 225, 0);
    "
    class="card_class"
    :class="{ folded: LayOutSettingStore.fold }"
  >
    <!-- table展示用户信息 -->
    <el-table
      style="width: 100%"
      :data="allureReportArr"
      :row-class-name="tableRowClassName"
      height="550"
    >
      <el-table-column label="来源" align="center" width="80">
        <el-tag :type="'success'" size="small">平台</el-tag>
      </el-table-column>
      <el-table-column
        label="项目"
        align="center"
        prop="envName"
        show-overflow-tooltip
        width="120"
      >
        <template #default="scope">
          <span style="color: #8d99ae">
            {{ scope.row.envName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建人"
        align="center"
        prop="createReportUserName"
        show-overflow-tooltip
        width="120"
      >
        <template #default="scope">
          <span style="color: #8d99ae">
            {{ scope.row.createReportUserName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="测试模块"
        align="center"
        prop="caseModuleName"
        show-overflow-tooltip
        min-width="150"
      >
        <template #default="scope">
          <span style="color: #8d99ae">
            {{ scope.row.caseModuleName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="执行时间"
        align="center"
        show-overflow-tooltip
        width="180"
        prop="startTime"
      >
        <template #default="scope">
          <span style="color: #8d99ae">
            {{ scope.row.startTime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="总数"
        align="center"
        prop="results_Total"
        show-overflow-tooltip
        width="80"
      >
        <template #default="scope">
          <el-tag :type="'success'" size="small">
            {{ scope.row.results_Total }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="通过数"
        align="center"
        prop="results_Passed"
        show-overflow-tooltip
        width="80"
      >
        <template #default="scope">
          <el-tag :type="'success'" size="small">
            {{ scope.row.results_Passed }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="失败数"
        align="center"
        prop="results_Failed"
        show-overflow-tooltip
        width="80"
      >
        <template #default="scope">
          <el-tag
            :type="scope.row.results_Failed != 0 ? 'danger' : 'success'"
            size="small"
          >
            {{ scope.row.results_Failed }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="跳过数"
        align="center"
        prop="results_No_Tested"
        show-overflow-tooltip
        width="80"
      >
        <template #default="scope">
          <el-tag
            :type="scope.row.results_No_Tested != 0 ? 'danger' : 'success'"
            size="small"
          >
            {{ scope.row.results_No_Tested }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="成功率"
        align="center"
        prop="results_Overall_Pass_Rate"
        width="100"
      >
        <template #default="scope">
          <el-tag
            :type="
              scope.row.results_Overall_Pass_Rate != '100.00%'
                ? 'danger'
                : 'success'
            "
            size="small"
          >
            {{ scope.row.results_Overall_Pass_Rate }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="平均接口请求耗时"
        align="center"
        prop="api_Average_Time"
        show-overflow-tooltip
        width="80"
      >
        <template #default="scope">
          <el-tag :type="'success'" size="small">
            {{ scope.row.api_Average_Time }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="总耗时"
        align="center"
        prop="api_Total_Time"
        show-overflow-tooltip
        width="80"
      >
        <template #default="scope">
          <el-tag :type="'success'" size="small">
            {{ scope.row.api_Total_Time }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <!-- eslint-disable -->
        <template #="{ row, $index }">
          <el-button type="primary" size="small" @click="goto_allure(row)">
            总报告
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100, 200, 500]"
      :background="true"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @current-change="getHas"
      @size-change="handler"
    />
  </el-card>
</template>
       <script setup lang="ts">
import useLayOutSettingStore from '@/store/modules/setting'
import { ref, onMounted } from 'vue'
import { reqGetAllureReportInfo } from '@/api/api_auto/allure_report'
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
defineOptions({
  name: 'InterfaceReport',
})
let LayOutSettingStore = useLayOutSettingStore()
//默认页码
let pageNo = ref<number>(1)
//一页展示几条数据
let pageSize = ref<number>(10)
//用户总个数
let total = ref<number>(0)
//存储全部用户的数组
let allureReportArr = ref<any>([])

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  if (row.results_Failed != 0) {
    return 'danger-row'
  }
  return ''
}

//定义响应式数据:收集用户输入进来的关键字
let keyword = ref<string>('')
//获取模板setting仓库
let settingStore = useLayOutSettingStore()

//组件挂载完毕
onMounted(() => {
  getHas()
})
//获取全部信息
const getHas = async (pager = 1, asc = 'desc') => {
  //收集当前页码
  pageNo.value = pager
  let result = await reqGetAllureReportInfo(
    pageNo.value,
    pageSize.value,
    keyword.value,
    asc,
  )
  if (result.code == 200) {
    total.value = result.data.total
    const filteredData = result.data.allureReportData.filter(
      (item: { report_URL: string }) => item.report_URL !== 'null',
    )
    allureReportArr.value = filteredData
  }
}
//分页器下拉菜单的自定义事件的回调
const handler = () => {
  getHas()
}

//跳转reportpotal
const router = useRouter()
const goto_allure = (row: any) => {
  router.push({
    name: 'InterfaceCaseReportDetail',
    query: { reportURL: row.report_URL },
  })
}

//搜索按钮的回调
const search = () => {
  //根据关键字获取相应的用户数据
  getHas()
  //清空关键字
  // keyword.value = ''
}
//重置按钮
const reset = () => {
  settingStore.refsh = !settingStore.refsh
}
</script>
        <script lang="ts">
export default {
  name: 'apireport',
}
</script>
  <style lang="scss" scoped>
.card_class {
  max-width: max(1250px, calc(100vw - 250px));
}
.card_class.folded {
  max-width: max(1250px, calc(100vw - 100px)); /* 折叠状态 */
}
.el-table .success-row {
  --el-table-tr-bg-color: rgba(125, 220, 135, 0.5);
}

.form {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
:deep(.danger-row) {
  background-color: #fef0f0;
}

:deep(.danger-row:hover) {
  background-color: #fde2e2;
}
:deep(.el-table__row:hover) {
  background-color: #f0f9ff;
  cursor: pointer;
}
</style>
        